<template>
  <div class="box">
    <div class="condition">
      <div>时间查询</div>
      <div class="block">
        <el-date-picker
          class="picker"
          v-model="Data"
          value-format="yyyy-MM-dd HH:mm"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </div>
      <div>传感器类型</div>
      <div>
        <el-select
          v-model="Gzm"
          placeholder="请选择传感器类型"

        >
          <el-option
            v-for="item in ChuanGanQiTpey"
            :key="item.ID"
            :label="item.SensortypeType"
            :value="item.SensortypeType"
          >
          </el-option>
        </el-select>
      </div>
      <!-- <div>安装位置</div>
      <div>
        <el-select
          v-model="Jclx"
          style="width: 350px"
          placeholder="请选择安装位置"
        >
          <el-option
            v-for="item in anzhuangweizhiSel"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div> -->
      <div><el-button type="warning" @click="Query">查询</el-button></div>
    </div>
    <div class="Tbale">
      <el-table
        :data="tableData"
        :header-cell-style="{
          background: 'rgb(40,103,185)',
          color: 'white',
          borderColor: 'rgb(43,88,144)',
          'text-align': 'center',
        }"
        :cell-style="{ 'text-align': 'center' }"
        height="750"
        style="width: 100%; padding: 0; height: 750px"
      >
        <el-table-column prop="location" label="安装位置"> </el-table-column>
        <el-table-column prop="values" label="测点数据"> </el-table-column>
        <el-table-column prop="unit" label="测点单位"> </el-table-column>
        <el-table-column prop="state" label="测点状态"> </el-table-column>
        <el-table-column prop="startTime" label="报警时间"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>
    
    <script>
import { dingbanbaojingbaojingType,dingbanshebeichuanganqipeizhilist } from "../../https/api/user";
export default {
  data() {
    return {
      Gzm: "",
      Jclx: "",
      Data: "",
      ChuanGanQiTpey: [],
      anzhuangweizhiSel: [],
      tableData: [],
    };
  },
  mounted() {
    this.baojingType();
  },
  methods: {
    Query() {
      const data = {
        startTime: this.Data[0],
        endTime: this.Data[1],
        Type: this.Gzm,
        // location:  encodeURIComponent(this.Jclx),
      };
      dingbanbaojingbaojingType(data).then((res) => {
        console.log("查询报警数据", res);
        if (res) {
          this.tableData = res;
        }
      });
    },
   
    baojingType() {
      const data = {
        w: 1,
      };
      dingbanshebeichuanganqipeizhilist(data).then((res) => {
        console.log("传感器类型类型", res);
        if (res) {
          this.ChuanGanQiTpey = res;
        }
      });
    },
  },
};
</script>
    
  <style  lang="less"scoped>
.box {
  width: 100%;
  padding: 0 20px;
  .condition {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    > div:nth-child(1) {
      color: white;
      font-size: 14px;
    }
    > div:nth-child(2) {
      margin-left: 7px;
    }
    > div:nth-child(3) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }
    > div:nth-child(4) {
      margin-left: 7px;
    }
    > div:nth-child(5) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }
    > div:nth-child(6) {
      margin-left: 7px;
    }
    > div:nth-child(7) {
      margin-left: 7px;
    }
    > div:nth-child(8) {
      margin-left: 7px;
    }
  }
  .Table {
    width: 100%;
    height: 750px;
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
::v-deep .el-table th > .cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}
.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}

::v-deep .el-form-item__label {
  color: white !important;
}

.picker {
  // height: 40px;
  width: 100%;
  background-color: rgb(14, 26, 55);
  ::v-deep .el-range-input {
    background-color: rgb(14, 26, 55);
  }
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: rgb(46, 95, 152);
}
</style>